<template>
  <div class="header">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="称呼:">
        <el-input v-model="formInline.name" placeholder="请输入称呼" />
      </el-form-item>
      <el-form-item label="Email:">
        <el-input v-model="formInline.email" placeholder="请输入联系方式" />
      </el-form-item>
      <el-form-item label="状态:">
        <el-select v-model="formInline.pass" placeholder="活动区域">
          <el-option label="已通过" :value="1" />
          <el-option label="未通过" :value="0" />
        </el-select>
      </el-form-item>
      <div style="display: flex; justify-content: flex-end">
        <el-form-item>
          <el-button type="primary" @click="onSearch">搜索</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  data() {
    return {
      formInline: {
        name: '',
        pass: '',
        email: ''
      }
    }
  },
  methods: {
    ...mapActions({
      // 数据请求
      cmmentList: 'comment/cmmentList',
      // 搜索数据
      searchComment: 'comment/searchComment'
    }),
    // 重置
    onReset() {
      const { pageSize } = this
      this.cmmentList({ page: 1, pageSize })
      this.currentPage1 = 1
    },
    // 搜索
    onSearch() {
      this.searchComment(this.formInline)
      this.currentPage1 = 1
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-form-inline {
  padding: 24px 12px;
  margin-bottom: 16px;
  background: #fff;
}
</style>
